import { message, Modal } from 'antd';
import TreeView from 'devextreme-react/tree-view';
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { fetchReportList } from '~/public/cpas-business/cpas-table/ExcelGrid/api/DesignTableApi';
import { getDataId } from '~/public/cpas-business/tools/Tools';
export interface propsData {
  dbname: string;
  selectionMode: any; //single||multiple
  dataId?: string | any;
  okCallback?: (itemNames: string[]) => void; //成功回调
  cancelCallback?: () => void; //失败回调
  modalProps?: any;//Modal属性{},如zindex
}
const ReportModal = React.forwardRef((props: propsData, ref: any) => {
  console.log(props, 'props---');
  const { dbname, dataId, selectionMode = 'multiple', cancelCallback, okCallback } = props;
  const reportTreeView = useRef<any>();
  const [reportDataSource, setReportDataSource] = useState<any>([]);
  const [reportChecks, setReportChecks] = useState<any>([]);
  const [reportInputValue, setReportInputValue] = useState<any>([]);
  const [isReportModalOpen, setReportModalOpen] = useState<boolean>(false);
  useImperativeHandle(ref, () => ({
    show: async () => {
      setReportModalOpen(true);
    },
    close: () => {
      setReportModalOpen(false);
    },
    getCheckList: () => {
      return reportInputValue;
    },
  }));
  const getCurrentDataId = async () => {
    if (dataId) {
      return dataId;
    } else {
      return await getDataId();
    }
  }; // 获取报表项目
  // 获取报表项目
  const getReportList = async () => {
    const dateId = await getCurrentDataId();
    const params = {
      dbName: dbname,
      year: dateId,
    };
    const reportList: any = await fetchReportList(params);
    if (!reportList.ok) {
      return message.error('暂无报表项目!!!');
    } else {
      const list = reportList.data.filter((item: any) => {
        item.key = item.itemName;
        item.title = item.itemName;
        item.id = item.code;
        const children = reportList.data.filter((e: any) => {
          e.key = e.itemName;
          e.title = e.itemName;
          e.id = e.code;
          return item.code === e.pCode;
        });
        item.children = children;
        item.items = children;
        return !item.pCode;
      });
      console.log(list, 'list---');
      return setReportDataSource(list);
    }
  };
  useEffect(() => {
    getReportList();
  }, [dbname]);
  const treeViewSelectionChanged = (e: any) => {
    console.log('selection change');
    const treeView = e.component;
    const syncSelectedEmployees = treeView.getSelectedNodes().map((node: any) => node.itemData.key);
    setReportChecks([...syncSelectedEmployees]);
  };
  const renderTreeViewItem = (item: { title: any; position: any }) => `${item.title}`;
  return (
    <Modal
      title="报表项目"
      open={isReportModalOpen}
      destroyOnClose={true}
      maskClosable={false}
      cancelText="取消"
      closable={false}
      onCancel={async () => {
        if (reportTreeView) {
          reportTreeView?.current?.instance.unselectAll();
        }
        setReportChecks([]);
        setReportInputValue('');
        setReportModalOpen(false);
        if (cancelCallback) {
          cancelCallback();
        }
      }}
      onOk={() => {
        setReportInputValue(reportChecks);
        setReportModalOpen(false);
        if (okCallback) {
          okCallback(reportChecks);
        }
      }}
      {...props.modalProps}
    >
      <div style={{ height: '50vh', overflow: 'auto', border: '1px solid #ccc', borderRadius: 5 }}>
        {/* <TextBox
              showClearButton={true}
              mode={"search"}
              value={searchValue}
              onValueChanged={(e) => onSearchValueChanged(e)}
            /> */}

        <TreeView
          id="treeviewReportProject"
          showCheckBoxesMode="normal"
          expandedExpr="expanded"
          selectNodesRecursive={false}
          searchEnabled={true}
          ref={reportTreeView}
          selectionMode={selectionMode}
          selectByClick={true}
          onSelectionChanged={treeViewSelectionChanged}
          // onItemSelectionChanged={onItemSelectionChanged}
          displayExpr="title"
          itemRender={renderTreeViewItem}
          items={reportDataSource}
          virtualModeEnabled={true}

        />
      </div>
    </Modal>
  );
});
export default ReportModal;
